<template>
  <div class="table-box">
    <a-table
        :show-header="props.showHeader"
        :size="props.size"
        :bordered="props.bordered"
        class="smarttable"
        :row-selection="rowSelection"
        :rowKey="(record) => record[props.selectWorld]"
        :columns="columns"
        :data-source="props.list"
        :row-class-name="className"
        :pagination="props.pagination"
        :scroll="{ x: '100%' }"
      >
        <template #bodyCell="{ column,record }">
          <span v-if="column&&column.dataIndex !== 'action'">{{ analysisItem(record, column) }}</span>
          <template v-if="column&&column.dataIndex === 'action'">
            <div class="action-box">
              <span
                v-for="(item, index) in props.rowItems"
                :key="index"
                @click="aa(item,record)"
              >
                <span v-if="item.isSubContainer">
                <span
                  v-if="
                    record['displaysartTableAction' + item.uuid] &&
                    item.isSubContainer
                  "
                >
                   {{ item.title }}
                </span>
              </span>
              <span v-else>
                 {{ item.title }}
              </span>
              </span>
            </div>
          </template>
        </template>
      </a-table>
  </div>
</template>
<script setup>
  import {
  computed,
  unref,
  ref,
  watch,
  onMounted
} from 'vue'
  const selectedRowKeys = ref([])
  const emit = defineEmits(["update:value", "btnClick",'changePageInfo',"select",]);
  const columns = ref([]);
  const props = defineProps({
  selectWorld: { type: String, default: "" },
  title:{type:String,default:''},
  list: { type: Array, default: ()=>{ return [] } },
  columns: { type: Array, default: ()=>{ return [] } },
  value: { type: [Array,String], default:'' } ,
  rowItems: { type: Array, default: ()=>{ return [] } },
  size:{type:String,default:''},
  showHeader:{type:Boolean,default:true},
  bordered:{type:Boolean,default:true},
  rowClassName:{type:String,default:''},
  rowSelection:{ type: Object, default: ()=>{ return {} } },
  pagination:{ type: Object, default: ()=>{ return {} } },
})
const analysisItem = (record, column) => {
  let val = record;
  column?.newKey?.forEach((item) => {
    val = val[item] ? val[item] : "";
  });
  return val;
};
const displayNo = (list) => {
  let arr = list.filter((it,index) => {
    it.key = index
    it.width = Number(it.width);
    if (it.child) {
      it["children"] = displayNo(it.child);
    }
    if (it.sorter) {
      it.sorter = {
        compare: (a, b) => a[it.dataIndex] - b[it.dataIndex],
        multiple: 1,
      };
    }
    return it.isShowCol;
  });
  return arr;
};
const className = computed(() => {
  if (props.rowClassName) {
    return (_record, index) =>
      index % 2 === 1 ? 'table-striped' : null
  }
  return false
})
const onSelectChange = (selectedRowKeyList,selectedRows) => {
  console.log('selectedRowKeys changed: ', selectedRowKeyList)
  selectedRowKeys.value = selectedRowKeyList
  emit(
    "select",
    selectedRows.map((it) => {
      return it[props.selectWorld];
    })
  );
}
const changePage = (value,pageSize)=>{
  emit('changePageInfo', {
    page: value,
    pageSize,
  })
}
const rowSelection = computed(() => {
  if (
    props.rowSelection.isRowSelection
  ) {
    if (props.rowSelection.type === "checkbox") {
      selectedRowKeys.value = props.value;
    } else {
      selectedRowKeys.value = [props.value];
    }
    return {
      selectedRowKeys: unref(selectedRowKeys),
      onChange: onSelectChange,
      type: props.rowSelection.type,
    }
  }
  return false
})
const aa = (item,rocord) => {

  emit("btnClick",
    {
    rowData:rocord,
     item:item,
     flag:rocord['disabledsartTableAction'+item.uuid]
    });
};
watch(
  () => props.list,
  () => {
    if (props.pagination) props.pagination.onChange = changePage;
  }
);
watch(
  () => props.pagination,
  () => {
    if (!props.pagination.onChange) props.pagination.onChange = changePage;
  },
  {
    deep: true,
  }
);
onMounted(() => {
  columns.value = displayNo(props.columns);
});
</script>
<style lang="less">
  .action-box {
  display: flex;
  span {
    margin-right: 10px;
    cursor: pointer;
    color: #3472f6;
  }
}
 .table-striped td {
    background-color: #fafafa;
  
 }
</style>